﻿@model VideoDetailVM
@{
    ViewBag.Title = Model.SEOTitle;
    ViewBag.PageId = "page_news";
}

@section header{
    
    <meta name="keywords" content="@Model.Keywords" />
    <meta name="description" content="@Model.Description" />
<link href="~/plugins/mediaelement/build/mediaelementplayer.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/scripts/lib/jquery/plugins/bxslider/jquery.bxslider.css">

    }

<aside class="rightcol rightcol-video">
    <h3>VIDEO</h3>
</aside>

<main class="page-about page-sample">
    <div class="content">
        <div class="container-fluid m-b-30">
            <div class="row">
                <div class="col-sm-12 col-md-10 col-md-offset-1">
                    <video  width="640" height="360" style="max-width:100%;" poster="@Model.Preview" controls="controls" preload="none">
                        @if (!string.IsNullOrEmpty(Model.VideoUrl))
                        {
                            <source type="video/mp4" src="@Model.VideoUrl" />
                        }                        
                        @if (!string.IsNullOrEmpty(Model.OgvUrl))
                        {
                            <source type="video/ogg" src="@Model.OgvUrl" />
                        }
                        @if (!string.IsNullOrEmpty(Model.WebmUrl))
                        {
                            <source type="video/webm" src="@Model.WebmUrl" />
                        }                        
                        <object style="width:100%;height:100%" type="application/x-shockwave-flash" data="/plugins/mediaelement/build/flashmediaelement.swf">
                            <param name="movie" value="/plugins/mediaelement/build/flashmediaelement.swf" />
                            <param name="flashvars" value="controls=true&file=@Model.VideoUrl" />
                            <img src="@Model.VideoUrl" style="width:100%;height:100%" title="No video playback capabilities" />
                        </object>
                    </video>
                </div>
            </div>
        </div>

        <ul id="bx-pager" class="thumbs">
            @foreach (var item in Model.Videos)
            {
                <li>
                    <a href="@Url.Action("Detail",new { id= item.Id })"><img src="@item.Thumbnail" /></a>
                </li>
               
            }
        </ul>
    </div>
</main>



@section footer{
<script src="~/plugins/mediaelement/build/mediaelement-and-player.min.js"></script>
<script src="~/plugins/mediaelement/build/lang/zh-cn.js"></script>
<script src="/scripts/lib/jquery/plugins/bxslider/jquery.bxslider.min.js"></script>

    
    <script>
        $(function(){
          //  $('video,audio').mediaelementplayer(/* Options */);
            $('video, audio').mediaelementplayer();

            $('.thumbs').bxSlider({
                slideWidth: 176,
                minSlides: 4,
                maxSlides: 7,
                moveSlides: 1,
                infiniteLoop: false,
                slideMargin: 10,
                pager: false
            });
        });
    </script>
}